import React, { useEffect, useState } from 'react';
import {
  ArrayCards,
  ArrayItems,
  ArrayTable,
  Cascader,
  Checkbox,
  Form,
  DatePicker,
  Editable,
  FormCollapse,
  FormGrid,
  FormItem,
  FormLayout,
  FormTab,
  NumberPicker,
  Password,
  PreviewText,
  Radio,
  Reset,
  Space,
  Submit,
  Switch,
  TimePicker,
  Transfer,
  TreeSelect,
  Upload,
  Select,
  Input,
} from '@formily/antd';
import HandleBtns from './components/handleBtns';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import style from './style.less';
import axios from 'axios';
import { history } from 'umi';
import ReactJson from 'react-json-view';
import { responseRules } from './utils';
import Computed from './components/Computed';
import GetFormValue from './components/GetFormValue';
import NumberRange from './components/NumberRange';
function FormilySchema() {
  const [schema, setSchema] = useState<any>({});

  useEffect(() => {
    axios.get(`/api/${history.location.query?.schemaPath}`).then((res) => {
      if (res.status === 200) {
        setSchema(res.data);
      }
    });
  }, []);
  const Text: React.FC<{
    value?: string;
    content?: string;
    mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p';
  }> = ({ value, mode, content, ...props }) => {
    const tagName = mode === 'normal' || !mode ? 'div' : mode;
    return React.createElement(tagName, props, value || content);
  };
  const SchemaField = createSchemaField({
    components: {
      ArrayCards,
      HandleBtns,
      ArrayItems,
      ArrayTable,
      Cascader,
      Checkbox,
      Form,
      DatePicker,
      Editable,
      FormCollapse,
      FormGrid,
      FormItem,
      FormLayout,
      FormTab,
      Input,
      NumberPicker,
      Password,
      PreviewText,
      Radio,
      Reset,
      Select,
      Space,
      Submit,
      Switch,
      TimePicker,
      Transfer,
      TreeSelect,
      Upload,
      Text,
      Computed,
      GetFormValue,
      NumberRange,
    },
    scope: {
      ...responseRules,
    },
  });
  const form = createForm();
  return (
    <div className={style.schema}>
      <Form form={form} labelCol={6} wrapperCol={16} colon={false}>
        <div>
          <SchemaField schema={schema}></SchemaField>
        </div>
      </Form>
      <div className={style.rightJson}>
        <ReactJson
          src={schema}
          onEdit={(edit) => {
            setSchema(edit.updated_src);
          }}
        />
      </div>
    </div>
  );
}

export default FormilySchema;
